<template>
    <view class="easy-num">
        <view class="input-number-box">
            <button class="btn btn-minus" :class="amount <= 0 ? 'disable' : ''" @click="changeAmount(ite, item, -1)">
                <text>-</text>
            </button>

            <view class="btn-input-box" @click="focusFn">
                <input v-model="amount" type="number" class="btn-input" @blur="changeAmount(ite, item, 0)" />
                <!-- 	<input  :focus="isFocus" :selection-start="start" :selection-end="end" v-model="amount" :type="type" pattern="[0-9]*" class="btn-input"
						@blur="changeAmount(ite,item,0)"> -->
            </view>
            <button
                class="btn btn-plus"
                :disabled="amount >= ite.Stock && !displayData.NoCheckStock"
                :class="{
                    disable: amount >= ite.Stock && !displayData.NoCheckStock,
                    disable: item.CurrentStock <= 0 && !displayData.NoCheckStock,
                }"
                @click="changeAmount(ite, item, 1)">
                <text>+</text>
            </button>
        </view>
    </view>
</template>

<script>
export default {
    comments: {},
    props: {
        ite: {
            type: Object,
            default: () => {},
        },
        item: {
            type: Object,
            default: () => {},
        },
        refresh: {
            type: Boolean,
            default: false,
        },
        displayData: {
            type: Object,
            required: true,
        },
    },
    watch: {
        refresh(e) {
            if (e) {
                this.amount = this.ite.Amount
                this.$forceUpdate()
            }
        },
    },
    data() {
        return {
            start: -1,
            end: -1,
            isFocus: false,
            type: "text",
            amount: 0,
        }
    },
    mounted() {
        this.amount = this.ite.Amount
    },
    methods: {
        changeAmount(ite, item, type) {
            ite.Amount = this.amount
            this.reSet()
            this.$emit("changeAmount", ite, item, type)
        },
        focusFn() {
            this.isFocus = true
            this.start = 0
            this.end = this.ite.Amount.toString().length
            // uni.hideKeyboard();
            // this.$nextTick(()=>{

            // })
            // setTimeout(()=>{
            // 	this.type = "number"
            // },500)
        },
        reSet() {
            this.isFocus = false
            this.start = -1
            this.end = -1
            this.type = "text"
        },
    },
}
</script>

<style lang="scss">
.input-number-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    .btn-input-box {
        position: relative;
        margin: 0 4rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        &:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            max-height: 56rpx;
            top: 0;
            left: 0;
            opacity: 0.1;
        }

        .btn-input {
            position: relative;
            z-index: 1;
            height: 56rpx;
            width: 80rpx;
            line-height: 1;
            border: none;
            background: transparent;
            text-align: center;
            font-size: $font-size-28;
            outline: none;
        }
    }

    .btn-minus,
    .btn-plus {
        justify-content: center;
        align-items: center;
        position: relative;
        font-size: 45rpx;
        line-height: 56rpx;
        height: 56rpx;
        width: 56rpx;
        text-align: center;
        overflow: hidden;
        border-radius: 0 8rpx 8rpx 0;

        &:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: currentColor;
            opacity: 0.1;
        }
    }

    .btn-minus {
        border-radius: 8rpx 0 0 8rpx;
    }

    .color-shadow {
        opacity: 0.1;
    }
}
.btn-input-box {
    height: 44rpx;
    width: 90rpx;
    padding: 0 5rpx;
    &:before {
        background: $transparent;
    }
    .btn-input {
        width: 100%;
        font-size: $font-size-26;
    }
}
.input-number-box {
    border-radius: 100rpx;
    padding: 4rpx 6rpx;
    border: solid 1rpx #eaeaea;
    .btn {
        width: 52rpx;
        height: 52rpx;
        border-radius: 100rpx;
        background: #f2f2f2;
        border: none;
        padding: 0;
        text {
            color: $color-black;
            font-size: 40rpx;
        }
    }
    .disable {
        border: none;
        text {
            color: #cccccc;
        }
    }
}
</style>
